<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>旋转</title>
  <style>
      body {
          perspective: 1000px;
      }
      form {
          width: 300px;
          margin: 100px auto;
      }
      label {
          position: relative;
      }
    .cur {
        display: inline-block;
        transition: all .3s;
        position: absolute;
        right: 10px;
    }
    #username {
        background-color: orange;
    }
    #username:hover + .cur {
        transform: rotateZ(90deg);
    }
  </style>
</head>
<body>
  <form action="#" method="get">
    <label for="username">
      <input type="text" id="username" name="username" value="" placeholder="用户名"/>
      <span class="cur">&gt;</span>
    </label>
  </form>
</body>
</html>